<template>
    <div id="data-view">
        <dv-full-screen-container>
            <topHeader />
            <dv-border-box-11 :title="monitorName" class="main-container" :titleWidth="titleWidth">
                <div class="top">
                    <dv-border-box-1
                        :color="['rgba(9,109,217,0.2)', 'rgba(9,109,217,0.3)']"
                        class="top_left"
                    >
                        <deviceState @finish="finish" />
                    </dv-border-box-1>
                    <dv-border-box-1 class="top_center">
                        <gaugeState @finish="finish" />
                    </dv-border-box-1>
                    <dv-border-box-1
                        :color="['rgba(9,109,217,0.2)', 'rgba(9,109,217,0.3)']"
                        class="top_right"
                    >
                        <otherState @finish="finish" />
                    </dv-border-box-1>
                </div>
                <div class="bottom">
                    <dv-border-box-1
                        :color="['rgba(9,109,217,0.2)', 'rgba(9,109,217,0.3)']"
                        class="bottom_left"
                    >
                        <overCountAnalysis @finish="finish" />
                    </dv-border-box-1>
                    <!-- <div class="bottom_left">
                        <overCountAnalysis />
                    </div> -->
                    <dv-border-box-1
                        :color="['rgba(9,109,217,0.2)', 'rgba(9,109,217,0.3)']"
                        class="bottom_center"
                    >
                        <overDetail @finish="finish" />
                    </dv-border-box-1>
                    <!-- <div class="bottom_center">
                        <overDetail />
                    </div> -->
                    <dv-border-box-1
                        :color="['rgba(9,109,217,0.2)', 'rgba(9,109,217,0.3)']"
                        class="bottom_right"
                    >
                        <overAnalysis @finish="finish" />
                    </dv-border-box-1>
                    <!-- <div class="bottom_right">
                        <overAnalysis />
                    </div> -->
                </div>
            </dv-border-box-11>
            <bottomFooter />
        </dv-full-screen-container>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import topHeader from './topHeader'
import deviceState from './deviceState'
import gaugeState from './gaugeState'
import otherState from './otherState'
import overCountAnalysis from './overCountAnalysis'
import overDetail from './overDetail'
import overAnalysis from './overAnalysis'
import bottomFooter from '../bottomFooter'
import http from '@/utils/http'
import * as util from '@/utils/util'
import { ElLoading, ElMessage } from 'element-plus'

onMounted(async () => {
    var mid = util.GetQueryParam('mid')
    if (mid) {
        var res = await http.get(`getmonitorname?mid=${mid}`)
        if (res.status === 0) {
            monitorName.value = `${res.data}测点实时监控`
            titleWidth.value = monitorName.value.length * 25
        } else {
            console.log(res)
            ElMessage(res.msg)
        }
    }
})
const loadingInstance = ElLoading.service({
    fullscreen: true,
})
const count = ref(0)

const finish = () => {
    count.value++
    if (count.value == 6) {
        loadingInstance.close()
    }
}

const monitorName = ref('')
const titleWidth = ref(250)
</script>

<style lang="less">
#data-view {
    width: 100%;
    height: 100%;
    background-color: #030409;
    color: #fff;

    #dv-full-screen-container {
        background-image: url('../img/bg.png');
        background-size: 100% 100%;
        box-shadow: 0 0 3px blue;
        display: flex;
        flex-direction: column;
    }

    .main-content {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .main-container {
        height: calc(100vh - 30px);
        width: 100%;
        box-sizing: border-box;
        padding-bottom: 10px;

        .top {
            height: 40%;
            width: 100%;
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            padding: 60px 10px 10px 10px;

            .top_left {
                width: 25%;
                height: 100%;
            }

            .top_center {
                width: 50%;
                height: 100%;
            }

            .top_right {
                width: 25%;
                height: 100%;
            }
        }

        .bottom {
            height: 60%;
            width: 100%;
            display: flex;
            flex-direction: row;
            box-sizing: border-box;

            padding: 10px 10px 0px 10px;

            .bottom_left {
                width: 25%;
                height: 100%;
            }

            .bottom_center {
                width: 50%;
                height: 100%;
            }

            .bottom_right {
                width: 25%;
                height: 100%;
            }
        }
    }
}
</style>
